<template>
  <div>
    <h1>
      <span v-bgred>局部自定义指令</span>
    </h1>
    <hr />
    <p v-size>全局自定义组件</p>
  </div>
</template>

<script>
// 有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
export default {
  name: "App",
  directives: {
    // 参数就是使用自定义指令的dom元素
    bgred(ele) {
      ele.style.background = "red";
    },
  },
};
</script>

<style>
</style>